<script setup lang="ts">

import { h, ref } from 'vue';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
import type { MenuProps } from 'ant-design-vue';
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
	{
		key: 'settings',
		icon: () => h(SettingOutlined),
		label: '设置',
		title: '设置',
	},
	{
		key: 'event',
		icon: () => h(AppstoreOutlined),
		label: '事件',
		title: '事件',
		children: [
			{
				type: 'group',
				label: '动作',
				children: [
					{
						label: '切入',
						key: 'event:action:1',
					},
					{
						label: '切出',
						key: 'event:action:2',
					},
				],
			},
			{
				type: 'group',
				label: '触发器',
				children: [
					{
						label: '切入',
						key: 'event:trager:1',
					},
					{
						label: '切出',
						key: 'event:trager:2',
					},
				],
			}
		],
	},
	{
		key: 'alipay',
		icon: () => h(AppstoreOutlined),
		label: h('a', { href: 'https://antdv.com', target: '_blank' }, '保存'),
		title: '保存',
	},
]);
</script>

<template>
<div class="header-wrapper">
	<a-menu style="height: 42px; line-height: 42px;" v-model:selectedKeys="current" mode="horizontal" :items="items" />
</div>
</template>

<style scoped>

</style>
